<template>
  <view>
    <view class="dynamicItem" v-for="(item, index) in dymiclist" :key="index">
      <view class="dynamicItem-head" @click="bindToLink(item.user_id)">
        <edu-avatar
          :src="item.avatar_url"
          size="64"
          :showLevel="item.is_vip == 1"
          level-icon="/static/images/headphoto_vip_icon.png"
          level-size="28"
        ></edu-avatar>
        <view class="dynamicItem-head-right">
          <view class="dynamicItem-head-right-head">
            <view class="dynamicItem-head-right-head-left">
              <view class="dynamicItem-head-right-head-left-name u-line-1">{{
                item.nick_name
              }}</view>
              <view class="dynamicItem-head-right-head-left-time">{{
                item.create_time | handleTime
              }}</view>
            </view>
            <view v-if="showFollow && item.user_id != userInfo.id">
              <view
                class="dynamicItem-head-right-head-right u-border"
                v-if="item.followed == 0"
                @click.stop="bindFollow(item.user_id)"
              >
                <u-icon name="plus" :color="globPrimaryColor" size="18"></u-icon><label>关注</label>
              </view>
              <view
                class="dynamicItem-head-right-head-right addfont u-border"
                v-if="item.followed == 1"
                @click.stop="bindDelFollow(item.user_id)"
              >
                <label>已关注</label>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="dynamicItem-artic" @click="bindToDetail(item.id)">{{ item.content }}</view> -->
      <view class="dynamicItem-artic" @click="bindToDetail(item.id)">
        <u-parse :html="delHtmlTag(item.content)"></u-parse>
      </view>

      <view
        class="dynamicItem-image"
        @click="previewImg(item.attach_url, 0)"
        v-if="item.attach_url.length == 1"
      >
        <courseImage width="400" height="400" :image="item.attach_url[0]"> </courseImage>
      </view>

      <view class="dynamicItem-someImages" v-else-if="item.attach_url.length > 1">
        <image
          class="images"
          @click="previewImg(item.attach_url, index2)"
          v-for="(img, index2) in item.attach_url"
          :key="index2"
          :src="img"
        ></image>
      </view>

      <view class="dynamicItem-zhuanfa" v-if="item.type == 2">
        <view
          v-if="[item.orignal_attach, item.orignal_content, item.orignal_user].includes(null)"
          class="dynamicItem-zhuanfa-del"
          >该内容已被删除，无法查看。</view
        >
        <view v-else>
          <view class="dynamicItem-zhuanfa-headtxt">
            <text class="dynamicItem-zhuanfa-headtxt-name">@{{ item.orignal_user }}:</text>
            <text class="dynamicItem-zhuanfa-headtxt-msg">
              <u-parse :html="delHtmlTag(item.orignal_content)"></u-parse>
            </text>
          </view>
          <view class="dynamicItem-zhuanfa-image" v-if="item.orignal_attach.length == 1">
            <courseImage width="400" height="400" :image="item.orignal_attach[0]"> </courseImage>
          </view>
          <view class="dynamicItem-zhuanfa-someImages" v-else-if="item.orignal_attach.length > 1">
            <image
              class="images"
              v-for="(img, index2) in item.orignal_attach"
              :style="{
                marginRight: (index2 + 1) % 3 == 0 ? '0rpx' : '',
              }"
              :key="index2"
              :src="img"
            >
            </image>
          </view>
        </view>
      </view>

      <view class="dynamicItem-iconItem">
        <view class="dynamicItem-iconItem-view" @click="bindZhuanfa(item.id, item.user_id)">
          <u-icon name="zhuanfa" color="#909399" size="40"></u-icon>
          <label style="margin-left: 8rpx; line-height: 40rpx">{{ item.recircle_num }}</label>
        </view>
        <view class="dynamicItem-iconItem-view" @click="bindToDetail(item.id)">
          <u-icon name="chat" color="#909399" size="40"></u-icon>
          <label style="margin-left: 8rpx; line-height: 40rpx">{{ item.comment_num }}</label>
        </view>
        <view class="dynamicItem-iconItem-view">
          <u-icon
            name="thumb-up"
            color="#909399"
            size="40"
            @click="bindThumb(item.id, 1)"
            v-if="item.is_like == 0"
          ></u-icon>
          <u-icon
            name="thumb-up-fill"
            :color="globPrimaryColor"
            size="40"
            @click="bindThumb(item.id, 0)"
            v-else-if="item.is_like == 1"
          ></u-icon>
          <label style="margin-left: 8rpx; line-height: 40rpx">{{ item.like_num }}</label>
        </view>
      </view>
    </view>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  props: {
    dymiclist: {
      type: Array,
    },
    showFollow: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    handleTime(timeStamp) {
      if (timeStamp > 0) {
        var date = new Date()
        date.setTime(timeStamp * 1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        h = h < 10 ? '0' + h : h
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        return y + '年' + m + '月' + d + '日'
      } else {
        return ''
      }
    },
    handleDay(remain) {
      if (remain) {
        var h =
          Math.floor(remain / 3600) < 10
            ? '0' + Math.floor(remain / 3600)
            : Math.floor(remain / 3600)
        return Math.ceil(h / 24)
      } else {
        return 0
      }
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
  },
  methods: {
    bindThumb(_id, _type) {
      var obj = {
        id: _id,
        type: _type,
      }
      this.$edu.judgeLogin(() => {
        this.$emit('thumbUp', obj)
      })
    },
    bindFollow(_id) {
      this.$edu.judgeLogin(() => {
        this.$emit('follow', _id)
      })
    },
    bindDelFollow(_id) {
      this.$emit('delFollow', _id)
    },
    bindToLink(_id) {
      this.$emit('toLink', _id)
    },
    bindToDetail(_id) {
      this.$emit('toDetail', _id)
    },
    bindZhuanfa(_id, _user_id) {
      var obj = {
        orignal_id: _id,
        owner_id: _user_id,
      }
      this.$edu.judgeLogin(() => {
        this.$emit('zhuanfa', obj)
      })
    },
    // 查看图片
    previewImg(imgs, _index) {
      uni.previewImage({
        urls: imgs,
        current: _index,
      })
    },
    // 去除富文本的标签
    delHtmlTag(html = '') {
      let text = html.replace(/\n/g, '<br/>')
      return text
    },
  },
}
</script>

<style lang="scss" scoped>
.dynamicItem {
  height: auto;
  overflow: hidden;
  border-bottom: 2rpx solid #f7f7f7;
  margin-bottom: 40rpx;

  &-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &-right {
      width: 602rpx;
      height: auto;
      margin-left: 24rpx;
      /* #ifndef APP-PLUS */
      background-color: white;
      /* #endif */

      &-head {
        height: 64rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;

        &-left {
          width: 60%;
          height: 100%;
          overflow: hidden;

          &-name {
            height: 26rpx;
            line-height: 26rpx;
            font-size: 28rpx;
            color: #303133;
            font-weight: 500;
          }

          &-time {
            height: 26rpx;
            font-size: 24rpx;
            color: #909399;
            margin-top: 10rpx;
          }
        }

        &-right {
          margin-top: 11rpx;
          padding: 8rpx 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8rpx;
          font-size: 22rpx;
          @include text-color();
          line-height: 1;
          &.u-border:after {
            @include border-color();
            border-radius: 8rpx;
          }
          &.addfont {
            color: #b7bac1;
            &.u-border:after {
              border-color: #b7bac1;
            }
          }
        }
      }
    }
  }

  &-artic {
    padding: 0 0rpx 0rpx 88rpx;
    font-size: 28rpx;
    color: #303133;
    line-height: 46rpx;
    letter-spacing: 1rpx;
    margin-top: 29rpx;
    margin-bottom: 24rpx;
  }

  &-image {
    padding: 0 0rpx 0rpx 88rpx;
    margin-bottom: 22rpx;
  }

  &-someImages {
    padding: 0 0rpx 0rpx 88rpx;
    display: flex;
    flex-wrap: wrap;

    .images {
      height: 186rpx;
      width: 186rpx;
      margin-right: 20rpx;
      margin-bottom: 22rpx;
    }
  }

  &-iconItem {
    height: 40rpx;
    padding: 0 20rpx 0rpx 88rpx;
    margin-top: 10rpx;
    margin-bottom: 25rpx;
    display: flex;
    justify-content: space-between;

    &-view {
      height: 40rpx;
      color: #909399;
    }
  }

  &-zhuanfa {
    height: auto;
    margin-bottom: 22rpx;
    margin-top: 8rpx;
    padding: 30rpx 18rpx 30rpx 88rpx;
    background: #f7f7f7;

    &-del {
      font-size: 28rpx;
      color: #303133;
    }

    &-headtxt {
      width: 100%;
      font-size: 28rpx;
      letter-spacing: 1px;
      margin-bottom: 12rpx;

      &-name {
        color: #5191ff;
      }

      &-msg {
        word-break: break-all;
        color: #303133;
      }
    }

    &-image {
      margin-top: 30rpx;
    }

    &-someImages {
      display: flex;
      flex-wrap: wrap;

      .images {
        height: 180rpx;
        width: 180rpx;
        margin-right: 20rpx;
        margin-bottom: 22rpx;
      }
    }
  }
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(3) {
  margin-right: 0 !important;
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(6) {
  margin-right: 0 !important;
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(9) {
  margin-right: 0 !important;
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(12) {
  margin-right: 0 !important;
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(15) {
  margin-right: 0 !important;
}

.dynamicItem > .dynamicItem-someImages image:nth-of-type(18) {
  margin-right: 0 !important;
}
</style>
